<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
    <labelArea label="参数">
        <el-form size="small" label-suffix=" :">
            <el-form-item label="Goto 标记" inline>
                <el-select v-model="config.mark" @change="change">
                    <template v-for="im in config.GotoArr" :key="im">
                        <el-option :value="im.label"
                            :label="(im.attrs.data.value || im.attrs.data.text).slice(1, -1)" />
                    </template>
                </el-select>
                <el-button @click="config.upDate">更新标记</el-button>
            </el-form-item>
            <el-form-item label="Goto 源">
                <span class="spanA" @click="config.Goto.to()" v-if="config.Goto.name">{{ config.Goto.name }}</span>
                <span v-else>none</span>
            </el-form-item>
            <el-form-item label="图标显示">
                <el-select v-model="config.type">
                    <el-option label="按元素(K.*u)" value="rect"></el-option>
                    <el-option label="矩阵(K*u)" value="circle"></el-option>
                    <el-option label="矩阵(u*K)" value="circle"></el-option>
                    <el-option label="矩阵(K*u)（u 向量）" value="circle"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </labelArea>
</template>

<script setup>

const { data, config } = defineProps(['data', 'config'])

function change(e) {
    let nameArr = ['一级', '二级', e]

    config.Goto.name = nameArr.join('/')
    console.log(config);
    // console.log(e, config.GotoArr.find(i => i.label == e));
    config.cell = config.GotoArr.find(i => i.label == e)
}


</script>


<style scoped></style>